﻿<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />



    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />


    <script src="../content/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>





</head>

<body>
    <div id="app">
        <div class="x-nav">

            <span class="nav-header">
                <a href="">首页</a>>
                <a href="">系统管理</a>>
                <a>
                    <cite>角色管理</cite>
                </a>
            </span>

        </div>
        <div class="x-body">
            <div class="layui-row">

                <input type="text" name="username" placeholder="请输入角色名称" style="width: 120px;float: left;"
                    autocomplete="off" class="layui-input">
                <button class="layui-btn" lay-submit="" lay-filter="sreach">
                    <i class="layui-icon">&#xe615;</i>
                </button>

            </div>
            <hr />
            <div>

                <button class="layui-btn" v-on:click="add"><i class="layui-icon"></i>添加</button>

            </div>
            <hr />
            <div class="table-responsive">
                <table class="table table-bordered table-hover">

                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" />
                            </th>
                            <th>角色</th>
                            <th>备注</th>
                            <th>是否启用</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="uitem in arrayData">
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td>{{uitem.jiaosename}}</td>
                            <td>{{uitem.backinfo}}</td>

                            <td>
                                <span v-if="uitem.state==1">是</span>
                                <span v-if="uitem.state==0">否</span>
                            </td>
                            <td class="td-manage">
                                <a title="编辑" v-on:click="vupdate(uitem)" href="javascript:;">
                                    <i class="layui-icon"></i>
                                </a>
                                <a title="删除" v-on:click="vdel(uitem)" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="page">
                <div>
                    <vue-nav :cur="cur" :all="all" :allcount="allcount" :callback="callback"></vue-nav>
                </div>
            </div>

        </div>


        <!--添加-->
        <div class="modal fade" id="addbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width:80%">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">添加信息</h4>
                    </div>
                    <div class="modal-body">

                        <form action="" v-on:submit.prevent="insert">
                            <fieldset>
                                <div class="control-group">
                                    <label for="input01" class="control-label">角色名称</label>
                                    <div class="controls">
                                        <input placeholder="" type="text" required class="form-control"
                                            v-model="addobj.jiaosename">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="input01" class="control-label">备注</label>
                                    <div class="controls">
                                        <input placeholder="" type="text" class="form-control"
                                            v-model="addobj.backinfo">
                                    </div>
                                </div>


                                <div class="control-group">
                                    <label for="input01" class="control-label">权限</label>
                                    <div class="controls">
                                        <input type="checkbox" @click="allcheck_add" v-model="isallcheck" />全选
                                        <hr />
                                        <div v-for="uitem in menulist" id="quanxianadd">

                                            <ul>
                                                <li><input type="checkbox" name="quanxian" :data-value="uitem.valuestr"
                                                        class="ckmenu"
                                                        @click='checked(uitem.valuestr)'>{{uitem.textstr}}

                                                    <span v-for="input in uitem.datalist">
                                                        <input type="checkbox" name="quanxian"
                                                            :data-value="uitem.valuestr+'_'+input.code"
                                                            @click="checked(uitem.valuestr+'_'+input.code)">{{input.name}}
                                                    </span>

                                                </li>

                                                <li style="padding-left:30px;" v-for="child in uitem.children">

                                                    <input type="checkbox" name="quanxian" :data-value="child.valuestr"
                                                        @click='checked(child.valuestr)'>{{child.textstr}}
                                                    <span v-for="input in child.datalist">
                                                        <input type="checkbox" name="quanxian"
                                                            :data-value="child.valuestr+'_'+input.code"
                                                            @click="checked(child.valuestr+'_'+input.code)">{{input.name}}
                                                    </span>

                                                </li>
                                            </ul>



                                        </div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="input01" class="control-label">是否启用</label>
                                    <div class="controls">
                                        <select v-model="addobj.state" class="form-control">
                                            <option value="">
                                                请选择
                                            </option>
                                            <option v-for="item in statelist" :value='item.id'>
                                                {{item.name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>




                            </fieldset>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">确认</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--添加结束-->
        <!--修改-->
        <div class="modal fade" id="editbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" style="width:80%">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                    </div>
                    <div class="modal-body">
                        <fieldset>
                            <div class="control-group">
                                <label for="input01" class="control-label">角色名称</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="editobj.jiaosename">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">备注</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="editobj.backinfo">
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">权限</label>
                                <div class="controls">
                                    <input type="checkbox" @click="allcheck_edit" v-model="isallcheck" />全选
                                    <hr />
                                    <div v-for="uitem in menulist" id="quanxianedit">
                                        <ul>
                                            <li><input type="checkbox" name="quanxian" :data-value="uitem.valuestr"
                                                    :checked="quanxiancheck(uitem.valuestr)" class="ckmenu"
                                                    @click='checked(uitem.valuestr)'>{{uitem.textstr}}

                                                <span v-for="input in uitem.datalist">
                                                    <input type="checkbox" :data-value="uitem.valuestr+'_'+input.code"
                                                        :checked="quanxiancheck(uitem.valuestr+'_'+input.code)"
                                                        name="quanxian"
                                                        @click="checked(uitem.valuestr+'_'+input.code)">{{input.name}}
                                                </span>

                                            </li>

                                            <li style="padding-left:30px;" v-for="child in uitem.children">

                                                <input type="checkbox" :data-value="child.valuestr"
                                                    :checked="quanxiancheck(child.valuestr)" name="quanxian"
                                                    @click='checked(child.valuestr)'>{{child.textstr}}
                                                <span v-for="input in child.datalist">
                                                    <input type="checkbox" :data-value="child.valuestr+'_'+input.code"
                                                        :checked="quanxiancheck(child.valuestr+'_'+input.code)"
                                                        name="quanxian"
                                                        @click="checked(child.valuestr+'_'+input.code)">{{input.name}}
                                                </span>

                                            </li>
                                        </ul>




                                    </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label for="input01" class="control-label">是否启用</label>
                                <div class="controls">
                                    <select v-model="editobj.state" class="form-control">
                                        <option value="">
                                            请选择
                                        </option>
                                        <option v-for="item in statelist" :value='item.id'>
                                            {{item.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>


                        </fieldset>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" v-on:click="update()">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--修改结束-->


    </div>
    <link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
    <script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../content/js/vue2.js"></script>
    <script src="../content/js/vue-nav.js"></script>
    <script src="./content/plugin/layer/layer.js"></script>
    <script src="../content/js/config.js"></script>
    <script>


        var vm = new Vue({
            el: "#app",
            data: {
                cur: 1,
                all: 0,
                size: 10,
                arrayData: [],
                allcount: 0,
                menulist: [],
                addobj: {
                    parentid: 0,
                    state: 1
                },
                editobj: {},
                quanxian: [],
                statelist: [{ "id": 1, "name": "是" }, { "id": 0, "name": "否" }],
                isallcheck: false
            },
            components: {
                'vue-nav': Vnav
            },
            methods: {
                quanxiancheck: function (uitem) {
                    var list = this.quanxian;
                    for (var i = 0; i < list.length; i++) {
                        // console.log("list0", list[i]);
                        // console.log("uitem", uitem);
                        if (list[i] == uitem) {
                            return true;
                        }
                    }
                    return false;
                },
                checked: function (fruitId) {

                    //console.log(this.quanxian);
                    let idIndex = this.quanxian.indexOf(fruitId)
                    // var index = this.quanxian.indexOf(rows[i].valuestr + ",");
                    // var ss = quanxian.substr(index, rows[i].valuestr.length);

                    if (idIndex >= 0) {
                        // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                        this.quanxian.splice(idIndex, 1)
                    } else {
                        // 选中该checkbox
                        this.quanxian.push(fruitId)
                    }
                },
                getmenulist: function (addobj) {
                    var self = this;

                    $.post(apiurl + "/admin/getmenu", {}, function (data) {

                        self.menulist = data.data;

                    });
                },
                add: function () {
                    this.addobj.parentid = 0;
                    $("#addbox").modal('show');
                },
                insert: function () {
                    var self = this;
                    this.addobj.id = "";
                    //   console.log(this.quanxian.join(","));
                    if (this.quanxian.length == 0) {
                        layer.msg("请选择权限");
                        return;
                    }

                    this.addobj.quanxian = this.quanxian.join(",");
                    this.addobj.token = json.token;
                    $.post(apiurl + "/admin/jiaose/add", this.addobj, function (data) {
                        if (data.status == 200) {
                            $("#addbox").modal('hide');
                            swal("success", "添加成功", "success");
                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }

                    });
                },
                getdata: function (_keycontent) {  //查询数据

                    var self = this;
                    $.post(apiurl + "/admin/jiaose/list", { page: self.cur, size: self.size }, function (_result) {
                        console.log(_result);
                        self.arrayData = _result.data;
                        self.all = _result.count;
                        self.allcount = _result.allcount;
                    });
                    this.getmenulist();
                },
                callback: function (data) {
                    var self = this;
                    this.cur = data;
                    $.post(apiurl + "/admin/jiaose/list", { page: self.cur, size: self.size }, function (_result) {
                        self.arrayData = _result.data;
                        self.all = _result.count;
                        self.allcount = _result.allcount;
                    });
                },
                vupdate: function (uitem) {

                    this.editobj = uitem;


                    if (uitem.quanxian == "") {
                        this.quanxian = [];
                    } else {
                        this.quanxian = uitem.quanxian.split(',');
                    }


                    $("#editbox").modal('show');

                },
                update: function () {
                    var self = this;


                    this.editobj.quanxian = this.quanxian.join(",");
                    this.editobj.token = json.token;
                    $.post(apiurl + "/admin/jiaose/edit", this.editobj, function (data) {
                        if (data.status == 200) {
                            $("#editbox").modal('hide');
                            layer.msg("修改成功")

                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }

                    });

                },
                vdel: function (uitem) {
                    var self = this;
                    swal({
                        title: "确定要删除吗?",
                        text: "",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是",
                        cancelButtonText: '否',
                        closeOnConfirm: false
                    }, function () {


                        $.ajax({
                            url: apiurl + '/admin/jiaose/del',
                            type: 'DELETE',
                            data: { "ids": uitem.id, token: json.token },
                            success: function (result) {
                                if (result.status == 200) {
                                    swal("系统提示", "已删除", "success");
                                    self.getdata("");
                                } else {
                                    swal("系统提示", "系统异常", "success");
                                }
                            }
                        });

                    });
                },
                allcheck_add: function () {
                    var self = this;
                    console.log("this.isallcheck", this.isallcheck);
                    if (this.isallcheck) {
                        $("#quanxianadd input[type=checkbox]").each(function () {
                            var fruitId = $(this).data("value");
                            self.quanxian.push(fruitId);
                        })
                        $("#quanxianadd input[type=checkbox]").prop("checked", true);
                    } else {
                        $("#quanxianadd input[type=checkbox]").prop("checked", false);
                        self.quanxian = [];
                    }
                    console.log("self.quanxian ", self.quanxian);

                },
                allcheck_edit: function () {
                    var self = this;

                    if (this.isallcheck) {

                        $("#quanxianedit input[type=checkbox]").each(function () {
                            var fruitId = $(this).data("value");
                            self.quanxian.push(fruitId);
                        })

                        $("#quanxianedit input[type=checkbox]").prop("checked", true);


                    } else {
                        $("#quanxianedit input[type=checkbox]").prop("checked", false);
                        self.quanxian = [];
                    }
                    console.log("self.quanxian ", self.quanxian);
                }

            },
            created: function () {  //初始化事件里边去调用查询方法
                this.getdata("");



            }
        });


    </script>
</body>

</html>